<template>
  <div class="mod-config">
    <div style="position: relative">
      <div style="padding: 10px; right: 0; position: absolute; top: 32px">
        <el-button type="primary" @click="handleDown">个人导出报告</el-button>
        <el-button type="primary" @click="handleDown2"
          >个人报告模板导出</el-button
        >
      </div>
    </div>
    <div v-if="headerData.tool">
      <personalReportCopy
        v-if="headerData.tool.indexOf('霍兰德专业倾向测评量表') !== -1"
      ></personalReportCopy>
      <personalDepressed
        v-else-if="
          headerData.gaugeNameList[0].indexOf('抑郁自评量表(SDS)') !== -1
        "
      ></personalDepressed>

      <div id="exportPersonal" style="width: 100%" v-else>
        <div class="textCenter">
          <div
            style="
              margin-bottom: 50px;
              font-size: 30px;
              font-weight: bold;
              margin-bottom: 50px;
              color: #1e9fff;
            "
          >
            个人测评报告
          </div>
        </div>
        <div>
          <div class="headerCss">基本信息</div>
          <table border="1" class="table_style">
            <tbody>
              <tr>
                <td class="minWidth">登录名</td>
                <td class="minWidth">{{ headerData.account }}</td>
                <td class="minWidth">姓名</td>
                <td class="minWidth">{{ headerData.realName }}</td>
                <td class="minWidth">性别</td>
                <td class="minWidth">
                  {{
                    headerData.sex == 1 ? "男" : headerData.sex == 2 ? "女" : ""
                  }}
                </td>
                <td class="minWidth">年龄</td>
                <td class="minWidth">
                  {{ headerData.age == -1 ? "" : headerData.age }}
                </td>
                <td class="minWidth">{{ !isEnterprise ? "年级" : "岗位" }}</td>
                <td class="minWidth">
                  {{ headerData.gradeName }}
                </td>
                <td class="minWidth">{{ !isEnterprise ? "班级" : "部门" }}</td>
                <td class="minWidth">
                  {{ headerData.classno }}
                </td>
              </tr>
              <tr v-for="(info, index) in infoList" :key="index" v-show="false">
                <td class="minWidth" v-if="index % 3 == 0">
                  {{ infoList[index].subject }}
                </td>
                <td class="minWidth" v-if="index % 3 == 0">
                  {{ infoList[index].selectAnswer }}
                </td>
                <td class="minWidth" v-if="index % 3 == 0">
                  {{ infoList[index + 1] ? infoList[index + 1].subject : "" }}
                </td>
                <td class="minWidth" v-if="index % 3 == 0">
                  {{
                    infoList[index + 1] ? infoList[index + 1].selectAnswer : ""
                  }}
                </td>
                <td colspan="2" class="minWidth" v-if="index % 3 == 0">
                  {{ infoList[index + 2] ? infoList[index + 2].subject : "" }}
                </td>
                <td colspan="2" class="minWidth" v-if="index % 3 == 0">
                  {{
                    infoList[index + 2] ? infoList[index + 2].selectAnswer : ""
                  }}
                </td>
              </tr>
              <!-- <tr>
                <td>部门</td>
                <td colspan="3">{{ headerData.deptName }}</td>
                <td>职务</td>
                <td colspan="3">{{ headerData.postName }}</td>
              </tr> -->
            </tbody>
          </table>
        </div>
        <br />
        <div>
          <div class="headerCss">测验结果</div>
          <table border="1" class="table_style">
            <tbody>
              <tr>
                <td>测验工具</td>
                <td>{{ headerData.tool }}</td>
                <td>测验用时</td>
                <td>{{ headerData.duration }}</td>
              </tr>
              <tr>
                <td>测验日期</td>
                <td>{{ headerData.startDate }}</td>
                <td>测评次序</td>
                <td>{{ headerData.count }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <br />
        <div>
          <div class="headerCss">测评介绍</div>
          <div style="border: 1px solid gainsboro">
            <span style="padding: 10px; display: inline-block">
              {{ headerData.introduce }}</span
            >
          </div>
        </div>
        <br />
        <div>
          <div class="headerCss">因子得分</div>
          <table border="1" class="table_style">
            <tbody>
              <tr>
                <td class="minWidth">因子名称</td>
                <td class="minWidth">因子得分</td>
                <td class="minWidth">因子结论</td>
              </tr>
              <tr v-for="(item, index) in data" :key="index">
                <td class="minWidth">{{ item.factorName }}</td>
                <td class="minWidth">{{ item.score }}</td>
                <td class="minWidth">{{ item.totalRemark }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div>
          <div>
            <span
              class=""
              style="
                font-size: 20px;
                margin-top: 5px;
                margin-left: 20px;
                display: inline-block;
              "
            ></span>
          </div>
          <div id="echarts_box" style="height: 400px"></div>
        </div>
        <div>
          <div
            v-for="item in data"
            :key="item.count"
            style="border: 1px solid gainsboro; margin-bottom: 20px"
          >
            <div class="titleCss">
              <span
                v-if="
                  headerData.gaugeNameList[0].indexOf('抑郁自评量表(SDS)') == -1
                "
                class=""
                style="font-size: 20px; margin-top: 5px; display: inline-block"
                >【{{ item.factorName }}】</span
              >
              <span
                v-else
                class=""
                style="font-size: 20px; margin-top: 5px; display: inline-block"
                >【{{ headerData.factorList[0].totalRemark }}】</span
              >
            </div>
            <div>【得分解释】</div>
            <div style="padding: 15px" v-html="item.explainRemark"></div>
            <hr style="border: 1px solid gainsboro" />
            <div>【辅导建议】</div>
            <div style="padding: 15px" v-html="item.suggest"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPersonalReport } from "@/api/evaluation/personal";
import personalReportCopy from "./personalReportCopy";
import personalDepressed from "./personalDepressed.vue";
import htmlToPdf from "@/util/htmlToPdf";
import * as echarts from "echarts";
import { mapState, mapGetters } from "vuex";
export default {
  name: "exportPersonal",
  components: { personalReportCopy, personalDepressed },
  data() {
    // 和导出pdf没关系
    return {
      headerData: {
        dimId: "",
      },
      data: [],
      infoList: [],
      list: [
        "现实型",
        "研究型",
        "艺术型",
        "社会型",
        "企业型",
        "常规型",
        "霍兰德代码",
      ],
      tenantId: "",
    };
  },
  created() {
    this.getList();
    this.tenantId =
      JSON.parse(localStorage.getItem("saber-userInfo")).content.tenantId || "";
  },
  computed: {
    ...mapState(["enterprise"]),
    ...mapGetters(["userInfo"]),
    isEnterprise() {
      const type = this.userInfo.schoolType;
      return type == 8 || type == 9;
    },
  },
  methods: {
    getBarChartInfo(xAxisData, seriesData) {
      var myChart = echarts.init(document.getElementById("echarts_box"));
      // 3. 使用刚指定的配置项和数据，显示图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        title: {
          text: "因子图表",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              interval: 0,
              rotate: 40,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "因子图表",
            type: "bar",
            barWidth: 60,
            data: seriesData,
            itemStyle: {
              normal: {
                borderRadius: [5, 5, 0, 0],
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      });
    },
    getChartInfo(radarData, seriesData) {
      var myChart = echarts.init(document.getElementById("echarts_box"));
      // 3. 使用刚指定的配置项和数据，显示图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        title: {
          text: "因子图表",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: 40,
          containLabel: true,
        },
        legend: {
          data: ["职业倾向分布"],
        },
        radar: {
          // shape: 'circle',
          indicator: radarData,
          axisName: {
            color: "black",
          },
          nameGap: 3,
          startAngle: 150,
        },
        series: [
          {
            name: "职业倾向分布",
            type: "radar",
            barWidth: 60,
            data: [{ value: seriesData, name: "职业倾向分布" }],
            label: {
              show: true,
            },
          },
        ],
      });
    },
    getDashboard() {
      let acore = this.data[0].score;
      //仪表盘
      var chartDom = document.getElementById("echarts_box");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        series: [
          {
            type: "gauge",
            center: ["50%", "60%"],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            splitNumber: 10,
            itemStyle: {
              color: "#FFAB91",
            },
            progress: {
              show: true,
              width: 30,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 30,
              },
            },
            axisTick: {
              distance: -45,
              splitNumber: 5,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            splitLine: {
              distance: -52,
              length: 14,
              lineStyle: {
                width: 3,
                color: "#999",
              },
            },
            axisLabel: {
              distance: -20,
              color: "#999",
              fontSize: 20,
            },
            anchor: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              width: "60%",
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, "-15%"],
              fontSize: 60,
              fontWeight: "bolder",
              formatter: "{value}",
              color: "auto",
            },
            data: [
              {
                value: acore,
              },
            ],
          },
          // {
          //   type: "gauge",
          //   center: ["50%", "60%"],
          //   startAngle: 200,
          //   endAngle: -20,
          //   min: 0,
          //   max: 60,
          //   itemStyle: {
          //     color: "#FD7347",
          //   },
          //   progress: {
          //     show: true,
          //     width: 8,
          //   },
          //   pointer: {
          //     show: false,
          //   },
          //   axisLine: {
          //     show: false,
          //   },
          //   axisTick: {
          //     show: false,
          //   },
          //   splitLine: {
          //     show: false,
          //   },
          //   axisLabel: {
          //     show: false,
          //   },
          //   detail: {
          //     show: false,
          //   },
          //   data: [
          //     {
          //       value: 20,
          //     },
          //   ],
          // },
        ],
      };

      option && myChart.setOption(option);
    },
    getList() {
      getPersonalReport(Object.assign({ id: this.$route.query.id })).then(
        (res) => {
          const data = res.data.data;
          this.headerData = data;
          this.infoList = data.infoList;
          this.data = data.factorList;
          // let list = [];
          // this.list.map((item) => {
          //   this.data.map((item2) => {
          //     if (item2.factorName.indexOf(item) > -1) {
          //       list.push(item2);
          //     }
          //   });
          // });
          // this.data = list;
          // debugger;
          if (data.tool.indexOf("霍兰德专业倾向测评量表") !== -1) {
            return;
          }
          if (data.gaugeNameList[0].indexOf("抑郁自评量表(SDS)") !== -1) {
            this.$nextTick(() => {
              this.getDashboard();
            });
            return;
          }
          let xAxisData = [];
          let seriesData = [];
          for (let i = 0; i < data.factorList.length; i++) {
            let rowData = data.factorList[i];
            if (
              rowData.factorName !== "总分" &&
              rowData.factorName !== "总均分" &&
              rowData.factorName !== "阳性项目数" &&
              rowData.factorName !== "综合型" &&
              rowData.factorName !== "霍兰德代码"
            ) {
              // xAxisData.push({ name: rowData.factorName, max: 15 });
              xAxisData.push(rowData.factorName);
              seriesData.push(rowData.score);
            }
          }
          // this.getChartInfo(xAxisData.reverse(), seriesData.reverse());
          this.$nextTick(() => {
            this.getBarChartInfo(xAxisData, seriesData);
          });
        }
      );
    },
    handleDown() {
      // this.$loading({
      //   lock: true,
      //   text: "正在导出报告...",
      //   spinner: "el-icon-loading",
      //   background: "rgba(0, 0, 0, 0.7)",
      // });
      // htmlToPdf.downloadPDF(
      //   document.querySelector("#exportPersonal"),
      //   this.headerData.realName +
      //     "-" +
      //     this.$route.query.projectName +
      //     "-个人分析报告",
      //   this
      // );
      this.$router.push({
        name: "个人测评报告导出",
        query: {
          id: this.$route.query.id,
        },
      });
    },
    handleDown2() {
      this.$router.push({
        name: "个人报告模板导出",
        query: {
          id: this.$route.query.id,
        },
      });
    },
  },
};
</script>

<style scoped>
.minWidth {
  min-width: 50px;
}
#exportPersonal {
  background-color: #fff;
  /* width: 1000px; */
  /* height: 400px; */
  margin: auto;
  padding: 40px;
  box-sizing: border-box;
}
.headerCss {
  font-weight: 800;
  color: white;
  background: #2196f3;
  padding: 8px 10px 8px 10px;
  margin-bottom: 10px;
  font-size: 20px;
}
.titleCss {
  background: gainsboro;
  height: 40px;
  /* margin-top: 20px; */
  margin-bottom: 10px;
}
.table_style td,
th {
  padding: 10px;
  font-size: 15px;
}
.textCenter {
  text-align: center;
}
.table_style {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
</style>
